<!--template放HTML script放JS style放CSS-->
<!--热部署：当修改了代码，会自动重新刷新页面，无需我们手动去做-->
<template>
  <h1>大家好今天是星期一</h1>
  <p>{{info}}</p>
  <h3>{{info}}</h3>
  {{info+'早上好!'}}
  <hr>
  <button @click="f">按钮</button>
  <hr>
  <!--在页面上新增一个p标签用于显示count的值-->
  <p>{{count}}</p>
  <!--添加一个记数按钮，每次点击时，count加1-->
  <button @click="f2">计数</button>
  <hr>
  <h4>{{x}}</h4>
  <h4 v-text="x"></h4>
  <h4 v-html="x"></h4>
</template>

<!--注意：script标签上必须要有setup！-->
<!--setup是Vue3提供的一个特殊函数，它是组合式API的入口点，可以帮助我们初始化组件-->
<script setup>
import {ref} from "vue";

  //1.定义响应式变量
  const info=ref("我是info");
  //2.定义箭头函数
  const f=()=>{
    /*在JS中使用响应式变量的值，必须加.value!!!*/
    console.log(info.value);
    //只要修改了响应式变量的值，页面绑定的数据就会自动更新
    info.value="info的新值";
  }
  //3.添加一个新的响应式变量count，初始值为0
  const count=ref(0);
  const f2=()=>{
    count.value++;
  }
  const x=ref('今天星期二，又是一个<mark>晴天</mark>');
</script>

<style scoped>

</style>